<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css">
  <title>东方仙盟开源酒店押金管理系统</title>

  <style>
    /* 房态卡片样式 */
    .room-status-container {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
      gap: 15px;
      padding: 15px 0;
    }
    
    .room-card {
      border-radius: 10px;
      padding: 15px;
      text-align: center;
      cursor: pointer;
      transition: transform 0.2s;
      box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    }
    
    .room-card:hover {
      transform: translateY(-3px);
    }
    
    .room-card.available {
      background-color: #d4edda; /* 绿色：空房 */
      border: 1px solid #c3e6cb;
    }
    
    .room-card.occupied {
      background-color: #fff3cd; /* 黄色：已入住 */
      border: 1px solid #ffeeba;
    }
    
    .room-card .room-number {
      font-size: 1.5em;
      font-weight: bold;
      margin-bottom: 5px;
    }
    
    .room-card .room-type {
      font-size: 0.9em;
      color: #666;
    }
  </style>
</head>
<body>
  <!-- 顶部 Header -->
  <header class="app-header">
    未来之窗东方仙盟酒店押金原路退回
  </header>

  <!-- 主体布局：左侧 Nav + 右侧内容 -->
  <div class="app-container">
    <!-- 左侧可收缩 Nav -->
    <nav class="sidebar" id="sidebar">
      <div class="sidebar-header">
        <span class="toggle-btn" onclick="toggleSidebar()">☰</span>
         
      </div>
      <ul class="nav-menu">
        <li onclick="东方仙盟菜单_显示_主页面('reception')">收银台</li>
        <li onclick="东方仙盟菜单_显示_主页面('deposit')">押金管理</li>
        <li onclick="东方仙盟菜单_显示_主页面('basic')">基础资料</li>
        <li onclick="东方仙盟菜单_显示_主页面('payment')">绑定收款</li>
        <li onclick="东方仙盟菜单_显示_主页面('login')">登录（预留）</li>
      </ul>
    </nav>

    <!-- 右侧内容区域 -->
    <main class="main-content" id="mainContent">
      <!-- 页面容器，通过 JS 动态切换内容 -->
	  <!--
      <div id="receptionPage" class="page" style="display: none;">
        <h2>收银台（房态页面）</h2>
        
        <table border="1">
          <thead>
            <tr>
              <th>房号</th>
              <th>房型</th>
              <th>状态</th>
            </tr>
          </thead>
          <tbody id="roomStatusTableBody">
            
          </tbody>
        </table>
      </div>
	  -->

	   <div id="receptionPage" class="page" style="display: none;">
        <h2>收银台（房态页面）</h2>
        <div class="room-status-container" id="roomStatusContainer">
          <!-- 动态渲染房态卡片 -->
        </div>
      </div>


<!--
	    <div id="basicPage" class="page" style="display: none;">
        <h2>基础资料</h2>
        
        <div>
          <h3>房型管理</h3>
          <input type="text" id="roomTypeId" placeholder="ID">
          <input type="text" id="roomTypeName" placeholder="名称">
          <input type="number" id="roomTypePrice" placeholder="默认房价">
          <input type="number" id="roomTypeDeposit" placeholder="默认押金">
          <button onclick="saveRoomType()">保存房型</button>
          <button onclick="deleteRoomType()">删除房型</button>
          <ul id="roomTypeList"></ul>
        </div>

       
        <div>
          <h3>楼层管理</h3>
          <input type="text" id="floorId" placeholder="ID">
          <input type="text" id="floorName" placeholder="名称">
          <input type="number" id="floorSort" placeholder="序号">
          <button onclick="saveFloor()">保存楼层</button>
          <button onclick="deleteFloor()">删除楼层</button>
          <ul id="floorList"></ul>
        </div>

        
        <div>
          <h3>房间管理</h3>
          <input type="text" id="roomId" placeholder="ID">
          <input type="text" id="roomTypeIdSelect" placeholder="房型ID">
          <input type="text" id="roomFloorIdSelect" placeholder="楼层ID">
          <input type="text" id="roomName" placeholder="名称">
          <input type="number" id="roomSort" placeholder="序号">
          <button onclick="saveRoom()">保存房间</button>
          <button onclick="deleteRoom()">删除房间</button>
          <ul id="roomList"></ul>
        </div>
      </div>

	  -->

 <style>
   
    
    .container {
      max-width: 1200px;
      margin: 20px auto;
      padding: 0 20px;
    }
    
    h2 {
      color: #333;
      margin-top: 30px;
    }
    
    table {
      width: 100%;
      border-collapse: collapse;
      margin-top: 10px;
    }
    
    table, th, td {
      border: 1px solid #ddd;
    }
    
    th, td {
      padding: 8px 12px;
      text-align: left;
    }
    
    th {
      background-color: #f2f2f2;
    }
    
    tr:hover {
      background-color: #f5f5f5;
    }
    
    button {
      padding: 5px 10px;
      margin-right: 5px;
      cursor: pointer;
      border: none;
      border-radius: 3px;
    }
    
    .btn-add {
      background-color: #4CAF50;
      color: white;
    }
    
    .btn-edit {
      background-color: #2196F3;
      color: white;
    }
    
    .btn-delete {
      background-color: #f44336;
      color: white;
    }
    
    .form-group {
      margin-bottom: 15px;
    }
    
    .form-group label {
      display: block;
      margin-bottom: 5px;
    }
    
    .form-group input {
      width: 100%;
      padding: 8px;
      border: 1px solid #ddd;
      border-radius: 3px;
    }
    
	   .modal {
      display: none;
      position: fixed;
      z-index: 1;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      overflow: auto;
      background-color: rgba(0,0,0,0.4);
    }
    
    .modal-content {
      background-color: #fefefe;
      margin: 15% auto;
      padding: 20px;
      border: 1px solid #888;
      width: 50%;
      max-width: 500px;
      border-radius: 5px;
    }
    
    .close {
      color: #aaa;
      float: right;
      font-size: 28px;
      font-weight: bold;
    }
    
    .close:hover,
    .close:focus {
      color: black;
      text-decoration: none;
      cursor: pointer;
    }
  </style>
	   <div id="basicPage" class="page" style="display: none;">
<!-- 导航菜单 -->
    <div class="nav">
      <button onclick="东方仙盟菜单_显示_子页面('roomType')">房型管理</button>
      <button onclick="东方仙盟菜单_显示_子页面('floor')">楼层管理</button>
      <button onclick="东方仙盟菜单_显示_子页面('room')">房间管理</button>
    </div>
    
    <!-- 房型管理 -->
    <div id="roomTypePage" class="  东方仙盟子页面">
      <h2>房型管理</h2>
      <button class="btn-add" onclick="openModal('roomType', 'add')">添加房型</button>
      
      <table>
        <thead>
          <tr>
            <th>ID</th>
            <th>名称</th>
            <th>默认房价</th>
            <th>默认押金</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody id="roomTypeTable">
          <!-- 动态加载数据 -->
        </tbody>
      </table>
    </div>
    
    <!-- 楼层管理 -->
    <div id="floorPage" class="  东方仙盟子页面" style="display: none;">
      <h2>楼层管理</h2>
      <button class="btn-add" onclick="openModal('floor', 'add')">添加楼层</button>
      
      <table>
        <thead>
          <tr>
            <th>ID</th>
            <th>名称</th>
            <th>序号</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody id="floorTable">
          <!-- 动态加载数据 -->
        </tbody>
      </table>
    </div>
    
    <!-- 房间管理 -->
    <div id="roomPage" class="  东方仙盟子页面" style="display: none;">
      <h2>房间管理</h2>
      <button class="btn-add" onclick="openModal('room', 'add')">添加房间</button>
      
      <table>
        <thead>
          <tr>
            <th>ID</th>
            <th>房型</th>
            <th>楼层</th>
            <th>名称</th>
            <th>序号</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody id="roomTable">
          <!-- 动态加载数据 -->
        </tbody>
      </table>
    </div>
  </div>
  
  <!-- 模态框 -->
  <div id="modal" class="modal">
    <div class="modal-content">
      <span class="close" onclick="东方仙盟菜单_关闭模态('modal')">&times;</span>
      <h3 id="modalTitle">添加房型</h3>
      
      <form id="dataForm">
        <input type="hidden" id="formType">
        <input type="hidden" id="formAction">
        <input type="hidden" id="formId">
        
        <div id="roomTypeFormFields">
          <div class="form-group">
            <label>名称:</label>
            <input type="text" id="roomTypeName" required>
          </div>
          <div class="form-group">
            <label>默认房价:</label>
            <input type="number" id="roomTypePrice" required>
          </div>
          <div class="form-group">
            <label>默认押金:</label>
            <input type="number" id="roomTypeDeposit" required>
          </div>
        </div>
        
        <div id="floorFormFields" style="display: none;">
          <div class="form-group">
            <label>名称:</label>
            <input type="text" id="floorName" required>
          </div>
          <div class="form-group">
            <label>序号:</label>
            <input type="number" id="floorSort" required>
          </div>
        </div>
        
        <div id="roomFormFields" style="display: none;">
          <div class="form-group">
            <label>房型:</label>
            <select id="roomTypeId" required>
              <!-- 动态加载房型选项 -->
            </select>
          </div>
          <div class="form-group">
            <label>楼层:</label>
            <select id="roomFloorId" required>
              <!-- 动态加载楼层选项 -->
            </select>
          </div>
          <div class="form-group">
            <label>名称:</label>
            <input type="text" id="roomName" required>
          </div>
          <div class="form-group">
            <label>序号:</label>
            <input type="number" id="roomSort" required>
          </div>
        </div>
        
        <button type="button" onclick="saveData()">保存</button>
        <button type="button" onclick="东方仙盟菜单_关闭模态('modal')">取消</button>
      </form>
    </div>

 </div>




      <div id="depositPage" class="page" style="display: none;">
        <h2>押金管理</h2>
        <!-- 押金订单列表示例 -->
        <table border="1">
          <thead>
            <tr>
              <th>订单编号</th>
              <th>房间号</th>
              <th>客人姓名</th>
              <th>总金额</th>
              <th>状态</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody id="depositTableBody">
            <!-- 动态渲染押金订单 -->
          </tbody>
        </table>
      </div>

      <!-- 其他页面保持不变 -->
      
    </main>
  </div>

  <!-- 底部版权 -->
  <footer class="app-footer">
    未来之窗软件服务中心
  </footer>

  <!-- 创建订单模态框 -->
  <div id="createOrderModal" class="modal" style="display: none;">
    <div class="modal-content">
      <h3>创建入住订单</h3>
      <div>
        <label>房间号：<span id="modalRoomName"></span></label>
        <input type="hidden" id="modalRoomId">
      </div>
      <div>
        <label>身份证号：</label>
        <input type="text" id="modalUserId" placeholder="客人身份证号">
      </div>
      <div>
        <label>姓名：</label>
        <input type="text" id="modalUserName" placeholder="客人姓名">
      </div>
      <div>
        <label>手机号：</label>
        <input type="text" id="modalUserPhone" placeholder="客人手机号">
      </div>
      <div>
        <label>押金金额：<span id="modalDepositPrice"></span></label>
      </div>
      <div>
        <button onclick="submitCreateOrder()">确认创建</button>
        <button onclick="东方仙盟菜单_关闭模态('createOrderModal')">取消</button>
      </div>
    </div>
  </div>

  <script src="script4.js"></script>
</body>
</html>
  <script>
    // 前缀常量
   // const STORAGE_PREFIX = "东方仙盟开源酒店系统_";
    
    // 页面初始化
    window.onload = function() {
      loadRoomTypes();
      loadFloors();
      loadRooms();
	  loadDepositOrders();
      东方仙盟菜单_显示_子页面('room');
      东方仙盟菜单_显示_主页面("reception");
	  renderRoomStatus();
	 

    };
    /*
    // 切换页面
    function showPage(pageId) {
      const pages = document.querySelectorAll('.page');
      pages.forEach(page => {
        page.style.display = 'none';
      });
      
      document.getElementById(pageId + 'Page').style.display = 'block';
    }
	*/
    
    // 加载房型数据
    function loadRoomTypes() {
      const roomTypes = getLocalStorage('roomTypes') || [];
      const tableBody = document.getElementById('roomTypeTable');
      tableBody.innerHTML = '';
      
      roomTypes.forEach(type => {
        const row = document.createElement('tr');
        row.innerHTML = `
          <td>${type.id}</td>
          <td>${type.name}</td>
          <td>${type.price}</td>
          <td>${type.deposit}</td>
          <td>
            <button class="btn-edit" onclick="openModal('roomType', 'edit', '${type.id}')">编辑</button>
            <button class="btn-delete" onclick="deleteData('roomType', '${type.id}')">删除</button>
          </td>
        `;
        tableBody.appendChild(row);
      });
    }
    
    // 加载楼层数据
    function loadFloors() {
      const floors = getLocalStorage('floors') || [];
      const tableBody = document.getElementById('floorTable');
      tableBody.innerHTML = '';
      
      floors.forEach(floor => {
        const row = document.createElement('tr');
        row.innerHTML = `
          <td>${floor.id}</td>
          <td>${floor.name}</td>
          <td>${floor.sort}</td>
          <td>
            <button class="btn-edit" onclick="openModal('floor', 'edit', '${floor.id}')">编辑</button>
            <button class="btn-delete" onclick="deleteData('floor', '${floor.id}')">删除</button>
          </td>
        `;
        tableBody.appendChild(row);
      });
    }
    
    // 加载房间数据
    function loadRooms() {
      const rooms = getLocalStorage('rooms') || [];
      const roomTypes = getLocalStorage('roomTypes') || [];
      const floors = getLocalStorage('floors') || [];
      const tableBody = document.getElementById('roomTable');
      tableBody.innerHTML = '';
      
      rooms.forEach(room => {
        const roomTypeName = roomTypes.find(t => t.id === room.roomTypeId)?.name || '未知';
        const floorName = floors.find(f => f.id === room.floorId)?.name || '未知';
        
        const row = document.createElement('tr');
        row.innerHTML = `
          <td>${room.id}</td>
          <td>${roomTypeName}</td>
          <td>${floorName}</td>
          <td>${room.name}</td>
          <td>${room.sort}</td>
          <td>
            <button class="btn-edit" onclick="openModal('room', 'edit', '${room.id}')">编辑</button>
            <button class="btn-delete" onclick="deleteData('room', '${room.id}')">删除</button>
          </td>
        `;
        tableBody.appendChild(row);
      });
    }
    
    // 打开模态框
    function openModal(formType, action, id = null) {
      document.getElementById('formType').value = formType;
      document.getElementById('formAction').value = action;
      document.getElementById('formId').value = id || '';
      
      // 隐藏所有表单字段
      document.getElementById('roomTypeFormFields').style.display = 'none';
      document.getElementById('floorFormFields').style.display = 'none';
      document.getElementById('roomFormFields').style.display = 'none';
      
      // 显示对应表单字段
      document.getElementById(`${formType}FormFields`).style.display = 'block';
      
      // 设置模态框标题
      const title = action === 'add' ? `添加${getFormTypeName(formType)}` : `编辑${getFormTypeName(formType)}`;
      document.getElementById('modalTitle').textContent = title;
      
      // 如果是编辑模式，填充表单数据
      if (action === 'edit') {
        fillFormData(formType, id);
      } else {
        // 清空表单
        document.getElementById('dataForm').reset();
        
        // 为房间表单加载下拉选项
        if (formType === 'room') {
          loadRoomTypeOptions();
          loadFloorOptions();
        }
      }
      
      // 显示模态框
      document.getElementById('modal').style.display = 'block';
    }
    
    // 获取表单类型名称
    function getFormTypeName(formType) {
      const names = {
        'roomType': '房型',
        'floor': '楼层',
        'room': '房间'
      };
      return names[formType] || '';
    }
    
    // 填充表单数据
    function fillFormData(formType, id) {
      const data = getLocalStorage(formType + 's').find(item => item.id === id);
      if (!data) return;
      
      if (formType === 'roomType') {
        document.getElementById('roomTypeName').value = data.name;
        document.getElementById('roomTypePrice').value = data.price;
        document.getElementById('roomTypeDeposit').value = data.deposit;
      } else if (formType === 'floor') {
        document.getElementById('floorName').value = data.name;
        document.getElementById('floorSort').value = data.sort;
      } else if (formType === 'room') {
        document.getElementById('roomTypeId').value = data.roomTypeId;
        document.getElementById('roomFloorId').value = data.floorId;
        document.getElementById('roomName').value = data.name;
        document.getElementById('roomSort').value = data.sort;
        
        // 加载下拉选项
        loadRoomTypeOptions();
        loadFloorOptions();
      }
    }
    
    // 加载房型下拉选项
    function loadRoomTypeOptions() {
      const roomTypes = getLocalStorage('roomTypes') || [];
      const select = document.getElementById('roomTypeId');
      select.innerHTML = '';
      
      roomTypes.forEach(type => {
        const option = document.createElement('option');
        option.value = type.id;
        option.textContent = type.name;
        select.appendChild(option);
      });
    }
    
    // 加载楼层下拉选项
    function loadFloorOptions() {
      const floors = getLocalStorage('floors') || [];
      const select = document.getElementById('roomFloorId');
      select.innerHTML = '';
      
      floors.forEach(floor => {
        const option = document.createElement('option');
        option.value = floor.id;
        option.textContent = floor.name;
        select.appendChild(option);
      });
    }
    
   
    
    // 保存数据
    function saveData() {
      const formType = document.getElementById('formType').value;
      const action = document.getElementById('formAction').value;
      const id = document.getElementById('formId').value;
      
      let data;
      
      if (formType === 'roomType') {
        data = {
          id: id || generateId(),
          name: document.getElementById('roomTypeName').value,
          price: document.getElementById('roomTypePrice').value,
          deposit: document.getElementById('roomTypeDeposit').value
        };
      } else if (formType === 'floor') {
        data = {
          id: id || generateId(),
          name: document.getElementById('floorName').value,
          sort: document.getElementById('floorSort').value
        };
      } else if (formType === 'room') {
        data = {
          id: id || generateId(),
          roomTypeId: document.getElementById('roomTypeId').value,
          floorId: document.getElementById('roomFloorId').value,
          name: document.getElementById('roomName').value,
          sort: document.getElementById('roomSort').value
        };
      }
      
      // 保存到 localStorage
      let items = getLocalStorage(formType + 's') || [];
      
      if (action === 'edit') {
        // 编辑：替换原有数据
        const index = items.findIndex(item => item.id === id);
        if (index !== -1) {
          items[index] = data;
        }
      } else {
        // 添加：新增数据
        items.push(data);
      }
      
      setLocalStorage(formType + 's', items);
      
      // 刷新表格
      if (formType === 'roomType') {
        loadRoomTypes();
      } else if (formType === 'floor') {
        loadFloors();
      } else if (formType === 'room') {
        loadRooms();
      }
      
      // 关闭模态框
      东方仙盟菜单_关闭模态('modal');
      
      // 提示成功
      alert(`${action === 'add' ? '添加' : '编辑'}成功！`);
    }
    
    // 删除数据
    function deleteData(formType, id) {
      if (!confirm(`确定要删除此${getFormTypeName(formType)}吗？`)) {
        return;
      }
      
      let items = getLocalStorage(formType + 's') || [];
      items = items.filter(item => item.id !== id);
      
      setLocalStorage(formType + 's', items);
      
      // 刷新表格
      if (formType === 'roomType') {
        loadRoomTypes();
      } else if (formType === 'floor') {
        loadFloors();
      } else if (formType === 'room') {
        loadRooms();
      }
      
      alert(`删除成功！`);
    }
    
    // 生成唯一ID
    function generateId() {
      return 'ID_' + Date.now() + '_' + Math.floor(Math.random() * 1000);
    }
    
    // 带前缀的 localStorage 获取
    function getLocalStorage(key) {
      const prefixedKey = STORAGE_PREFIX + key;
      const data = localStorage.getItem(prefixedKey);
      return data ? JSON.parse(data) : [];
    }
    
    // 带前缀的 localStorage 设置
    function setLocalStorage(key, value) {
      const prefixedKey = STORAGE_PREFIX + key;
      localStorage.setItem(prefixedKey, JSON.stringify(value));
    }
  </script>